<template>
  <view class="upload-avatar" :style="customStyle">
    <button class="choose-avatar__button" @click="chooseavatar"></button>
    <image class="avatar-img" :src="getAvatar" mode="aspectFill" />
    <!-- <image class="camera-icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/camera-icon.png" /> -->
    <view class="camera-icon disFlxCC" @click="chooseavatar">
      <text class="ali-icon">&#xe614;</text>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { useUpload } from '@/hooks/core/useUpload';
  import { useDebounceFn } from '@vueuse/core';
  import { ref, type PropType, type CSSProperties, computed } from 'vue';
  import { propTypes } from '@/utils/propTypes';
  const EmptyAvatar =
    'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/emptyIcon/empty-avatar-2.png';
  const props = defineProps({
    modelValue: propTypes.string.def(''),
    customStyle: Object as PropType<CSSProperties>,
  });

  const emit = defineEmits(['update:modelValue']);

  const { result, chooseFile, delResultItem } = useUpload({
    count: 1,
    isCrop: true,
    cropOptions: {
      width: 640,
      height: 800,
      scaleRatio: 3,
    },
  });

  const getAvatar = computed(() => {
    let bigImg = result.value[0]?.filePath ?? '';
    if (bigImg) {
      emit('update:modelValue', bigImg);
    }
    return result.value[0]?.tempFilePath || props.modelValue || EmptyAvatar;
  });

  function chooseavatar() {
    delResultItem(0);
    chooseFile({ mediaType: 'image' });
  }

  // const chooseavatar = useDebounceFn(async (event: { detail: { avatarUrl: string } }) => {
  //   const url = event.detail.avatarUrl;
  //   const resp = await request('image', {
  //     tempFilePath: url,
  //     progress: 0,
  //   });
  //   emit('update:modelValue', resp.imagePathBig);
  // }, 500);
</script>

<style lang="scss" scoped>
  .upload-avatar {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    border: 4rpx solid rgba($color: #fff, $alpha: 0.4);
    box-sizing: border-box;
    margin: 0 auto;
    position: relative;
    .choose-avatar__button {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
    }
    .avatar-img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    .camera-icon {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 60rpx;
      height: 60rpx;
      background-color: rgba($color: #000, $alpha: 0.6);
      border-radius: 50%;
      .ali-icon {
        color: #fff;
        font-size: 36rpx;
      }
    }
  }
</style>
